<template>
    <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem v-if="category.top" :to="`/category/${category.top.id}`">{{ category.top.name }}</XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
            <XtxBreadItem v-if="category.sub" :key="category.sub.id">{{ category.sub.name }}</XtxBreadItem>
        </Transition>
    </XtxBread>
</template>
<script>
import { useCategoryStore } from '@/store/modules/category'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
export default {
    name: 'SubBread',
    setup() {
        const route = useRoute()
        console.log(route.params.id)
        const categoryStore = useCategoryStore()
        const category = computed(()=>{
            const obj = {}
            const {list} = storeToRefs(categoryStore)
            list.value.forEach(top=>{
                top.children && top.children.forEach(sub=>{
                    if(sub.id == route.params.id) {
                        obj.sub = {
                            id:sub.id,
                            name:sub.name
                        }
                        obj.top = {
                            id:top.id,
                            name:top.name
                        }
                    }
                })
            })
            return obj
        })
        return {
            category,
        }
    }
}
</script>
<style scoped lang="less"></style>